<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/web/js/vue2.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/web/js/axios.min.js"></script>

    <style>

        /* 定义卡片样式 */
        .card {
            width: 390px; /* 宽度 */
            height: 554px; /* 高度 */
            background: #3405a3; /* 背景颜色 */
            border-radius: 15px; /* 边框圆角 */
            box-shadow: 1px 5px 60px 0px #100a886b; /* 盒子阴影 */
        }

        /* 定义卡片顶部的装饰线条样式 */
        .card .card-border-top {
            width: 60%; /* 宽度 */
            height: 3%; /* 高度 */
            background: #6b64f3; /* 背景颜色 */
            margin: auto; /* 居中 */
            border-radius: 0px 0px 15px 15px; /* 边框圆角 */
        }

        /* 定义人物名称样式 */
        .card span {
            font-weight: 600; /* 字体粗细 */
            color: white; /* 字体颜色 */
            text-align: center; /* 居中 */
            display: block; /* 块级元素 */
            padding-top: 10px; /* 顶部内边距 */
            font-size: 16px; /* 字体大小 */
        }

        /* 定义人物职位信息样式 */
        .card .job {
            font-weight: 400; /* 字体粗细 */
            color: white; /* 字体颜色 */
            display: block; /* 块级元素 */
            text-align: center; /* 居中 */
            padding-top: 3px; /* 顶部内边距 */
            font-size: 12px; /* 字体大小 */
        }

        /* 定义卡片内部的图像或其他媒体样式 */
        .card .img {
            width: 370px; /* 宽度 */
            height: 380px; /* 高度 */
            background: #6b64f3; /* 背景颜色 */
            border-radius: 15px; /* 边框圆角 */
            margin: auto; /* 居中 */
            margin-top: 25px; /* 顶部外边距 */
        }

        /* 定义按钮样式 */
        .card button {
            padding: 8px 25px; /* 内边距 */
            display: block; /* 块级元素 */
            margin: auto; /* 居中 */
            border-radius: 8px; /* 边框圆角 */
            border: none; /* 无边框 */
            margin-top: 30px; /* 顶部外边距 */
            background: #6b64f3; /* 背景颜色 */
            color: white; /* 字体颜色 */
            font-weight: 600; /* 字体粗细 */
        }

        /* 定义按钮悬停时的样式 */
        .card button:hover {
            background: #534bf3; /* 背景颜色 */
        }
    </style>
</head>
<body>

<div id="app">
    <el-row :gutter="12" style="margin-top:20px">
        <el-col :span="6" :offset="1">
            <el-card shadow="hover" style="border-radius: 30px">
                {{hh.zh}}
                <el-divider direction="vertical"></el-divider>
                {{hh.temp}} °c
            </el-card>
        </el-col>
        <el-col :span="6" offset="2">
            <el-card shadow="hover" style="border-radius: 30px">
                {{bj.zh}}
                <el-divider direction="vertical"></el-divider>
                {{bj.temp}} °c
            </el-card>
        </el-col>
        <el-col :span="6" offset="2">
            <el-card shadow="hover" style="border-radius: 30px">
                {{dq.zh}}
                <el-divider direction="vertical"></el-divider>
                {{dq.temp}} °c
            </el-card>
        </el-col>
    </el-row>
</div>

<script>
    const vm = new Vue({
        el: "#app",
        data() {
            return {
                hh: {
                    temp: 0,
                    lat: 0,
                    lon: 0,
                    zh: "",
                },
                bj: {
                    temp: 0,
                    lat: 0,
                    lon: 0,
                    zh: "",
                },
                dq: {
                    temp: 0,
                    lat: 0,
                    lon: 0,
                    zh: "",
                },

                apiKey: "37cfe98fb2882aefd5e302c2961b38f3",
            }
        },
        methods: {
            async callHH() {
                await axios.get(`https://api.openweathermap.org/geo/1.0/direct?q=heihe&appid=${this.apiKey}`).then(res => {

                        this.hh.lat = res.data[0].lat;
                        this.hh.lon = res.data[0].lon;
                        // console.log(this.hhlat)
                        this.hh.zh = res.data[0].local_names.zh;
                        axios.get(`https://api.openweathermap.org/data/2.5/weather?lat=${this.hh.lat}&lon=${this.hh.lon}&appid=${this.apiKey}&units=metric`).then(res => {
                            this.hh.temp=res.data.main.temp;
                            // console.log(this.hhtemp)
                        })
                    }
                )
            },
            async callBJ() {
                await axios.get(`https://api.openweathermap.org/geo/1.0/direct?q=beijing&appid=${this.apiKey}`).then(res => {

                        this.bj.lat = res.data[0].lat;
                        this.bj.lon = res.data[0].lon;
                        // console.log(this.lat)
                        this.bj.zh = res.data[0].local_names.zh;
                        axios.get(`https://api.openweathermap.org/data/2.5/weather?lat=${this.bj.lat}&lon=${this.bj.lon}&appid=${this.apiKey}&units=metric`).then(res => {
                            this.bj.temp=res.data.main.temp;
                            // console.log(this.hhtemp)
                        })
                    }
                )
            },
            async callDQ() {
                await axios.get(`https://api.openweathermap.org/geo/1.0/direct?q=daqing&appid=${this.apiKey}`).then(res => {

                        this.dq.lat = res.data[0].lat;
                        this.dq.lon = res.data[0].lon;
                        // console.log(this.lat)
                        this.dq.zh = res.data[0].local_names.zh;
                        axios.get(`https://api.openweathermap.org/data/2.5/weather?lat=${this.dq.lat}&lon=${this.dq.lon}&appid=${this.apiKey}&units=metric`).then(res => {
                            this.dq.temp=res.data.main.temp;
                            // console.log(this.hhtemp)
                        })
                    }
                )
            },
        },
        mounted() {
            this.callHH();
            this.callBJ();
            this.callDQ();
        }
    })
</script>

</body>
</html>